<template>

  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="首页" name="/">
    </el-tab-pane>
    <el-tab-pane label="配置" name="config"></el-tab-pane>
    <el-tab-pane label="起步" name="main"></el-tab-pane>
    <el-tab-pane label="预览" name="preview"></el-tab-pane>
    <el-tab-pane label="导出" name="export"></el-tab-pane>
    <el-tab-pane label="帮助" name="help"></el-tab-pane>
  </el-tabs>

  <div class="page-wrapper">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"/>
      </keep-alive>
    </router-view>
  </div>

</template>

<script>

export default {
  name: 'App',
  components: {},
  data() {
    return {
      activeName: "first"
    }
  },
  methods: {
    handleClick({props}) {
      this.$router.push(props.name)
    }
  },
  setup() {

  }
}
</script>

<style>
@import "colorui/main.css";
@import "colorui/icon.css";

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.demo-tabs {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2000;
  background: #ffffff;
}

body {
  background-color: #ffffff !important;
}

.page-wrapper {
  margin-top: 43px;
}
</style>
